<template>
    <div class="chatting">
      <!-- 聊天界面头部 -->
      <div class="chatting-header" >
        <h2>AI 疫情智能问答机器人</h2>
      </div>

      <!-- 聊天内容区域 -->
      <div ref="chattingContent" id="chattingContent" class="chatting-content">
        <div v-for="(item, index) of msgs" v-bind:key="index">
          <div v-if="item.self" class="chatting-item self clearfix">
            <div class="msg-date">
              {{ item.date }}
            </div>
            <div class="msg-from">
              <span class="loc">[{{item.loc}}]</span>
              <span class="msg-author">{{ item.from}}</span>
              <img src="./common/icons/icon-ai2.svg" alt="">
            </div>
            <div class="msg-content">{{ item.content }}</div>
          </div>

          <!--回答内容-->
          <div v-else class="chatting-item other clearfix">
            <div class="msg-date">
              {{ item.date }}
            </div>
            <div class="msg-from">
              <img src="./common/icons/robot.svg" alt="">
              <span class="msg-author">{{ item.from }}</span>
            </div>
            <div class="msg-content" v-html="item.content"></div>
          </div>

        </div>

      </div>

      <!-- 输入区域 -->
      <div class="chatting-input">
        <input @keyup.enter="send" v-model.trim="inputContent" placeholder="请输入跟疫情相关的问题吧！">
        <button @click="send">发送</button>
      </div>

    </div>

</template>

<script>
export default {
  name: 'AI',
  data() {
    return {
      // 不设置缓存，页面有keepalive临时缓存
      msgs: [],
      inputContent: '',
      oContent: {},
      addr: '未知'
    }
  },
  // watch: {
  //   msgs(val) {
  //     localStorage.msgs_ai = JSON.stringify(val);
  //   }
  // },
  computed: {
    name() {
      return 'scuters';
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   if (!localStorage.name) {
  //     next('/')
  //   } else {
  //     next();
  //   }
  // },

  mounted() {
    // console.log('title');
    this.oContent = document.getElementById('chattingContent');
    setTimeout(() => {
      this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
    }, 0)
  },
  methods: {
    send() {
      this.oContent.scrollTop = this.oContent.scrollHeight;
      if (this.inputContent === '') {
        return;
      } else {
        // 输入的人self为true
        this.msgs.push({
          date: this.moment().format('MM-DD HH:mm:ss'),
          loc: this.addr,
          from: "scuters",
          content: this.inputContent,
          self: true,
        });
        setTimeout(() => {
          this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
        }, 1000)

        this.$http.post("http://68.79.40.27:9203/webhooks/rest/webhook",{"sender":"scut","message":this.inputContent})
          .then(result => {
            let msg = "";
            var i = 0;
            for (i = 0; i < result.data.length; i++) {
              msg+=result.data[i].text+"<br>"
            }
            // push a new dialog, robot -> self: false
            this.msgs.push({
              date: this.moment().format('MM-DD HH:mm:ss'),
              from: '智能机器人',
              content:msg,
              self: false,
            })
            //console.log(result.data);
          })
          .then(() => {
            this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
          })
        this.inputContent = '';
      }
    },
  },
  created() {
    // this.$http.get('https://zhaoplus.com/api/ip').then(result => {
    //   if (result.data.content.address) {
    //     this.addr = result.data.content.address;
    //   }
    // })
  }
}
</script>

<style lang="scss" scoped>
  $blue: #2196f3;

  .chatting {
    display: flex;
    flex-direction: column;
    width: 800px;
    min-height: 700px;
    margin: 10px auto;

    .chatting-header {
      text-align: center;
      height: 50px;
      width: 100%;
      background-color: $blue;
      color: white;

      h2 {
        height: 50px;
        line-height: 50px;
      }

      .chatting-menu {
        width: 30px;
        height: 30px;
        i.icon-menu {
          background: url('./common/icons/icon-index.svg') no-repeat;
          background-size: contain;
        }
      }
    }

    .chatting-content {
      flex: 1;
      width: 100%;
      background-color: rgba(0, 0, 0, .1);
      overflow: auto;
      .chatting-item {
        padding: 10px;
        width: 100%;
        .msg-date {
          text-align: center;
          color: gray;
          font-size: 80%;
        }
        .msg-from {
          display: flex;
          align-items: center;
          span.loc {
            margin-top: 4px;
            color: gray;
            font-size: 60%;
            margin-right: 5px;
          }
          .msg-author {
            font-size: 1rem;
          }
          img {
            width: 30px;
            height: 30px;
            border-radius: 15px;
          }
        }
        .msg-content {
          margin-top: 5px;
          background-color: white;
          min-width: 200px;
          max-width: 300px;
          padding: 6px 10px;
          border-radius: 10px;
        }
      }

      .chatting-item + .chatting-item {
        margin-top: 10px;
      }
      .self {
        .msg-from {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          img {
            margin-left: 10px;
          }
        }

        .msg-content {
          float: right;
          word-wrap: break-word;
          word-break: break-all;
          margin-right: 10px;
          min-width: 200px;
          max-width: 300px;
        }


      }

      .other {
        .msg-from {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            margin-right: 10px;
          }
          font-size: 1rem;
        }

        .msg-content {
          float: left;
          margin-left: 10px;
          word-wrap: break-word;
          word-break: break-all;
          min-width: 200px;
          max-width: 300px;
        }

      }

      .online {
        width: 200px;
        // max-width: 100%;
        margin: 3px auto;
        border-radius: 4px;
        text-align: center;
        background-color: #FFFDE7;
      }
    }

    .chatting-input {
      display: flex;
      height: 40px;
      width: 100%;
      input {
        flex: 1;
        padding-left: 10px;
        // padding-top: 10px;
        height: 100%;
        font-size: 1rem;
      }
      button {
        width: 60px;
        height: 100%;
        background-color: $blue;
        color: white;
        font-size: 1rem;
      }
    }
  }
  button {
    cursor: pointer;
    border: 0;
    border-radius: 0;
  }
  input {
    border: 0.5px solid #bababa;
  }

  a {
    text-decoration: none;
  }

  i {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
  }

  li {
    list-style: none;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: " ";
  }
  .clearfix:after {
      clear: both;
  }
  .clearfix{
      *zoom: 1;
  }

  .online {
    width: 200px;
    margin: 3px auto;
    border-radius: 4px;
    text-align: center;
    background-color: #ECEFF1;
    color: gray;
    font-size: 50%;
  }

  .slide-bottom-enter-active {
    transition: all .3s ease;
  }
  .slide-bottom-leave-active {
    transition: all .2s ease;
  }
  .slide-bottom-enter, .slide-bottom-leave-active {
    transform: translateX(-130px);
    opacity: 0;
  }

  .slide-top-enter-active {
    transition: all .5s ease-out;
  }

  .slide-top-enter, .slide-top-leave-active {
    transform: translateY(-450px);
    opacity: 0;
  }

  .slide-left-enter-active {
    transition: all .4s ease;
  }

  .slide-left-enter, .slide-left-left-active {
    transform: translateX(-375px);
    opacity: 0;
  }

  .slide-right-enter-active {
    transition: all .4s ease;
  }

  .slide-right-enter, .slide-right-active {
    transform: translateX(375px);
    opacity: 0;
  }

  .showAbout-enter-active {
    transition: all .4s ease-in-out;
  }
  .showAbout-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .showAbout-enter, .showAbout-leave-active {
    transform: rotateZ(180deg);
    opacity: 0;
  }
</style>
